<template>
    <div class="date">
        <mTitle :title="title"></mTitle>
        <div class="date-title">
            <span class="text-year">{{year}}</span>
            <span class="text-week">{{weekDay}}</span>
            <span class="text-nongli">{{nongli}}</span>
        </div>
        <split></split>
        <scroll class="date-container" :data="dateList">
            <div>
                <ul class="date-item">
                    <router-link :to="'/dateActivity/'+item.id" tag="li" class="date-list" v-for="(item, index) in dateList" :key="index">
                        <div class="left">
                            <img class="img" :src="item.coverimg" alt="" />
                        </div>
                        <div class="middle">
                            <div class="date-list-title">{{item.title}}</div>
                            <div class="start-wrapper">
                                <div class="start-text">
                                    <i class="icon"></i>
                                    <span class="text">开始时间</span>
                                </div>
                                <div class="start-time">
                                    <span class="start-date">{{item.startdate}}</span>
                                    <span class="start-hour">{{item.starttime}}</span>
                                </div>
                                <div class="end-text">
                                    <i class="icon"></i>
                                    <span class="text">结束时间</span>
                                </div>
                                <div class="end-time">
                                    <span class="end-date">{{item.enddate}}</span>
                                    <span class="end-hour">{{item.endtime}}</span>
                                </div>
                            </div>
                            <!-- <p class="date-list-address">{{item.title}}</p> -->
                        </div>
                        <!-- 已截止 -->
                        <!-- <div class="right" v-show="item.cansub === 0">
                            <span class="check btn">已截止</span>
                        </div> -->
                        <div class="right" v-show="item.cansub === 1 && item.hassubform === '1'">
                            <span class="check btn" v-if="item.hassub === '-1'">待审核</span>
                            <span class="check btn" v-if="item.hassub === 0" @click.stop="activityDetail(item.id)">报名</span>
                            <span class="success btn" v-if="item.hassub === '1'" @click.stop="cancelApply(item.id)">取消报名</span>
                            <span class="success btn" v-if="item.hassub === '2'">已拒绝</span>
                        </div>
                    </router-link>
                </ul>
            </div>
            <!-- 请求数据loading -->
            <div class="loading-wrapper" v-show="!dateList.length && !noActivity">
                <loading></loading>
            </div>
            <!-- 暂无活动安排 -->
            <div class="no-activity" v-show="noActivity">
                <span class="text">本周暂无活动安排</span>
            </div>
        </scroll>
        <!-- 底部 -->
        <div class="date-fixed">
            <router-link to="/date/20000101" tag="div" replace class="date-fixed-item active">
                <i class="icon icon-item1"></i>
                <span class="desc">本周活动</span>
            </router-link>
            <router-link to="/dateDetail" tag="div" replace class="date-fixed-item">
                <i class="icon icon-item2"></i>
                <span class="desc">日历一览</span>
            </router-link>
        </div>
        <activity-detail ref="activityDetailFlag" :DetailList="DetailList" @changeSuccess="changeSuccess" @changeAudit="changeAudit"></activity-detail>
    </div>
</template>

<script>
    import axios from 'axios'
    import Split from 'base/split/split'
    import mTitle from 'base/title/title'
    import Scroll from 'base/scroll/scroll'
    import Loading from 'base/loading/loading'
    import {Dialog} from 'vant'
    import {Toast} from 'vant'
    import calendar from 'common/js/nongli'
    import ActivityDetail from 'pages/activity/components/activity-detail/activityDetail'

    export default {
        data () {
            return {
                title: "活动日历",
                year: '',
                weekDay: '',
                nongli: '',
                dateList: [],
                DetailList: {},
                id: '',
                noActivity: false
            }
        },
        methods: {
            // 报名成功
            changeSuccess (id) {
                for (var i=0;i<this.dateList.length;i++) {
                    if (Number(id) === Number(this.dateList[i].id)) {
                        this.dateList[i].hassub = "1"
                    }
                }
            },
            // 报名审核
            changeAudit (id) {
                for (var i=0;i<this.dateList.length;i++) {
                    if (Number(id) === Number(this.dateList[i].id)) {
                        this.dateList[i].hassub = "-1"
                    }
                }
            },
            // 取消报名
            cancelApply (id) {
                console.log(id)
                Dialog.confirm({
                    message: "是否取消报名"
                }).then(() => {
                    axios.post('/api/index.php?g=Api&m=Ucenter&a=cancelactsub', {
                        openid: localStorage.getItem("openid"),
                        mid: localStorage.getItem("memberid"),
                        actid: id
                    }).then((res) => {
                        // 取消成功
                        if (res.data.rescode === "0000") {
                            Toast.success('取消成功')
                            for (var i=0;i<this.dateList.length;i++) {
                                if (Number(id) === Number(this.dateList[i].id)) {
                                    this.dateList[i].hassub = 0
                                }
                            }
                        }
                    }).catch(function (error) {
                        
                    })
                }).catch(() => {
                    Dialog.close()
                })
            },
            // 跳转报名详情
            activityDetail (id) {
                this.$refs.activityDetailFlag.show()
                for(var i=0;i<this.dateList.length;i++) {
                    if (this.dateList[i].id === id) {
                        this.DetailList = this.dateList[i]
                    }
                }
            },
            getDateInfo () {
                if (this.$route.params.id === "20000101") {
                    axios.post('/api/index.php?g=Api&m=Ucenter&a=nowweekactlist', {
                        openid: localStorage.getItem("openid"),
                        mid: localStorage.getItem("memberid")
                    }).then((res) => {
                        if (res.data.rescode=='0000') {
                            this.dateList = res.data.data
                        } else {
                            setTimeout(() => {
                                this.noActivity = true
                            },5000)
                        }
                    }).catch(function (error) {
                        
                    })
                } else {
                    axios.post('/api/index.php?g=Api&m=Ucenter&a=nowweekactlist', {
                        openid: localStorage.getItem("openid"),
                        mid: localStorage.getItem("memberid"),
                        riqi: this.id
                    }).then((res) => {
                        if (res.data.rescode=='0000') {
                            console.log(res.data.data)
                            this.dateList = res.data.data
                        }
                    }).catch(function (error) {

                    })
                }
            }
        },
        components: {mTitle,Scroll,Loading,Split,ActivityDetail},
        mounted () {
            // let today = new Date()
            // let y = today.getFullYear()
            // let m = today.getMonth()
            // let d = today.getDate()
            // let w = today.getDay()
            // this.year = y + '年' + (m+1) + '月' + d + '日'
            // if (w === 0) {
            //     this.weekDay = '周日' 
            // } else if (w === 1) {
            //     this.weekDay = '周一'
            // } else if (w === 2) {
            //     this.weekDay = '周二'
            // } else if (w === 3) {
            //     this.weekDay = '周三'
            // } else if (w === 4) {
            //     this.weekDay = '周四'
            // } else if (w === 5) {
            //     this.weekDay = '周五'
            // } else if (w === 6) {
            //     this.weekDay = '周六'
            // }
            let y = this.id.slice(0,4)
            let m = this.id.slice(4,6)
            let d = this.id.slice(6,8)
            this.year = y + '年' + m + '月' + d + '日'
            this.weekDay = calendar.solar2lunar(y,m,d).ncWeek
            this.nongli = calendar.solar2lunar(y,m,d).gzYear + '年' + calendar.solar2lunar(y,m,d).IMonthCn + calendar.solar2lunar(y,m,d).IDayCn
        },
        created () {
            this.id = this.$route.params.id
            if (Number(this.id) === 20000101) {
                let today = new Date()
                let y = String(today.getFullYear())
                let m = String(today.getMonth() + 1)
                let d = String(today.getDate())
                if(m.length < 2) {
                    m = '0' + m
                }
                if(d.length < 2) {
                    d= '0' + d
                }
                this.id = y+ m + d
            }
            this.getDateInfo()
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~common/stylus/mixins.styl'
    .date
        width: 100%
        height: 100%
        position: relative
        overflow: hidden
        .date-title
            width: 100%
            height: 40px
            background: #fff
            line-height: 40px
            padding: 0 15px
            box-sizing: border-box
            .text-year,.text-week
                margin-right: 10px
        .date-container
            position: absolute
            width: 100%
            top: 100px
            bottom: 44px
            background: #fff
            padding: 0 15px
            box-sizing: border-box
            overflow: hidden
            .loading-wrapper
                position: absolute
                width: 100%
                top: 50%
                -webkit-transform: translateY(-50%)
                transform: translateY(-50%)
                z-index: 9
            .no-activity
                position: absolute
                width: 100%
                top: 50%
                -webkit-transform: translateY(-50%)
                transform: translateY(-50%)
                z-index: 9
                left: 0
                right: 0
                text-align: center
                .text
                    font-size: 20px
                    color: #0094d4
            .date-item
                width: 100%
                .date-list
                    width: 100%
                    height: 120px
                    border-bottom: 1px solid #eee
                    box-sizing: border-box
                    display: flex
                    align-items: center
                    overflow: hidden
                    position: relative
                    .left
                        flex: 0 0 100px
                        width: 100px
                        margin-right: 10px
                        .img
                            width: 100px
                    .middle
                        flex: 1
                        ellipsis()
                        .date-list-title
                            width: 100%
                            font-size: 14px
                            ellipsis()
                        .date-list-address
                            font-size: 10px
                            color: #888
                            ellipsis()
                            margin-top: 4px
                        .start-wrapper
                            margin-top: 6px
                            .start-text,.end-text
                                font-size: 0
                                .icon
                                    background: url('./icon1.png') no-repeat
                                    width: 9px
                                    height: 9px
                                    background-size: 100% 100%
                                    display: inline-block
                                .text
                                    font-size: 14px
                                    color: #0094d4
                                    display: inline-block
                                    margin-left: 6px
                            .start-time,.end-time
                                font-size: 0
                                margin-top: 4px
                                .start-date,.end-date
                                    font-size: 14px
                                    color: #d40000
                                .start-hour,.end-hour
                                    font-size: 14px
                                    color: #d40000
                                    margin-left: 10px
                            .end-text
                                margin-top: 4px
                                .icon
                                    background: url('./icon2.png') no-repeat
                                    background-size: 100% 100%
                                .text
                                    color: #888
                            .end-time
                                .end-date,.end-hour
                                    color: #888
                    .right
                        position: absolute
                        right: 0
                        top: 43px
                        .btn
                            width: 66px
                            height: 24px
                            background: #0094d4
                            border-radius: 20px
                            color: #fff
                            display: block
                            text-align: center
                            line-height: 24px
                            font-size: 14px
                            &.success
                                background: #0094d4
        .date-fixed
            position: fixed
            height: 44px
            bottom: 0
            left: 0
            width: 100%
            display: flex
            align-items: center
            border-top: 1px solid #eee
            background: #fff
            .date-fixed-item
                flex: 1
                text-align: center
                &.active
                    .desc
                        color: #0094d4
                    .icon
                        background: url('./icon3-active.png') no-repeat
                        background-size: 100% 100%
                    .icon-item2
                        background: url('./icon4-active.png') no-repeat
                        background-size: 100% 100%
                .icon
                    display: block
                    background: url('./icon3.png') no-repeat
                    width: 15px
                    height: 19px
                    background-size: 100% 100%
                    margin: 0 auto
                .icon-item2
                    background: url('./icon4.png') no-repeat
                    width: 19px
                    height: 19px
                    background-size: 100% 100%
                .desc
                    display: block
                    font-size: 12px
                    color: #a1a1a1
                    margin-top: 4px
</style>